<template>
    <Modal
        v-model="modal"
        title="呼叫界面"
        @on-cancel="cancel"
        :mask-closable="false" draggable sticky :mask="false">
        <Input v-model="phoneNumber"/>
        <Table v-if="callType == '0'" :columns="agentColumns" :data="agentList" max-height="500" @on-row-click="rowClick"></Table>
        <div v-else>
            <div class="dialer_btn">
            <Button @click="callNumber('1')">1</Button>
            <Button @click="callNumber('2')">2</Button>
            <Button @click="callNumber('3')">3</Button>
            </div>
            <div class="dialer_btn">
            <Button @click="callNumber('4')">4</Button>
            <Button @click="callNumber('5')">5</Button>
            <Button @click="callNumber('6')">6</Button>
            </div>
            <div class="dialer_btn">
            <Button @click="callNumber('7')">7</Button>
            <Button @click="callNumber('8')">8</Button>
            <Button @click="callNumber('9')">9</Button>
            </div>
            <div class="dialer_btn">
            <Button @click="callNumber('*')" style="line-height: 45px;">*</Button>
            <Button @click="callNumber('0')">0</Button>
            <Button @click="callNumber('#')">#</Button>
            </div>
        </div>
        <div slot="footer">
        <Button type="text" @click="cancel">取消</Button>
        <Button type="primary" @click="call">确定</Button>
      </div>
    </Modal>
</template>
<script>
    export default {
          props: {
            showDialer:Boolean,
            agentList: Array,
            callType: String
          },
        data () {
            return {
                modal: false,
                phoneNumber:'',
                agentColumns:[{title:'员工姓名',key:'employeeName'},{title:'员工工号',key:'agentNumber'},{title:'员工状态',key:'employeeOnLineState'}]
            }
        },
        methods: {
            call () {
                this.$emit("closeDialerPage",true, this.phoneNumber,this.type);
                // return false;
            },
            cancel(){
                this.$emit("closeDialerPage", false, '');
            },
            rowClick(val,index){
                this.phoneNumber = val.agentNumber;
            },
            callNumber(value){
                this.phoneNumber += value;
                this.$emit("dtmfEvent", value);
                
            }
        },
        watch:{
              showDialer:function () {
                  this.modal=this.showDialer;
                  this.phoneNumber = '';
                  this.type = this.callType;
              }
        }
    }
</script>
<style scoped>
.dialer_btn{
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.dialer_btn .ivu-btn{
      height: 37px;
      width: 80px;
      margin-left: 21px;
      background-color: #e7effa;
      border-radius: 1px;
      span{
        font-size: 20px;
      }
    }
</style>